//嵌套 代码拆分以及引入
span span{
    color:red;
}
span span a{
    color: blue;
}

//比较二者,后者修改方便 语法也更简洁
div{
    span{
        color:red;
    }
    a{
        color:blue;
    }
}

//引入 全部拆分出去 相当于一个入口文件   
// css中的导入只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢
// sass在生成css文件时就把相关文件导入进来，而无需发起额外的下载请求
// 使用sass的@import规则并不需要指明被导入文件的全名
@import 'variables';
@import 'header';
@import 'content';


// 实际上可以导入到一个css规则内
aside {
    background: blue;
    color: white;
  }//假设这个内容在_blue_theme.scss中
//   .blue-theme {@import "blue-theme"} 导入到css规则内

// 原生css的导入 scss首先会找.scss后缀的文件 以下三种情况会生成原生的css@import
// 被导入文件的名字以.css结尾；
// 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
// 被导入文件的名字是CSS的url()值。